<template>
  <!-- 横版 -->
  <scroll-view
    scroll-x
    :enhanced="true"
    :show-scrollbar="false"
    scroll-with-animation
    enable-flex
    class="container"
  >
    <template v-for="(v, i) in list" :key="v.productLibId">
      <PublicGoodsItem
        :goods="{
          productLibId: v.productLibId,
          imageUrl: v.imageUrl,
          productName: v.productName,
          price: v.minPrice,
          shopName: v.shopName,
          productType: v.productType,
          userId: v.userId,
          memberDiscountTagName: v.memberDiscountTagName,
          priceShowType: v.priceShowType,
        }"
        :style-type="StoreHomeRecommendStyleTypeEnum.HORIZONTAL"
      ></PublicGoodsItem>
    </template>
  </scroll-view>
</template>

<script setup lang="ts">
  import { StoreHomeRecommendStyleTypeEnum } from '@/enums/productEnum';
  import { watch, type PropType } from 'vue';
  import PublicGoodsItem from './index.vue';
  import type { ProductItem } from '@/api/mall/types';

  const props = defineProps({
    list: Array as PropType<ProductItem[]>,
  });
</script>

<style lang="scss" scoped>
  .container {
    box-sizing: border-box;
    height: 424rpx;
    display: flex;
    padding: 0 8rpx;
  }
</style>
